<template>
  <div class="page">
    <Head menuType="zwfw" />
    <div class="pageBox">
      <div class="screen_l">
        <div class="card">
          <div class="card_title">覆盖门店类型占比</div>
          <div class="card_box">
            <vue-seamless-scroll
                  :data="fgmdlxzbData"
                  :class-option=" {
                        step: 0.5, // 滚动速度
                        limitMoveNum: 7, // 开始滚动的数据量
                        hoverStop: true, // 悬停停止
                        direction: 1, // 0向下 1向上 2向左 3向右
                        openWatch: true, // 开启数据实时监控
                      }"
                  class="typeBox"
                >
                <div class="item" v-for="(item,index) in fgmdlxzbData" :key="index">
                  <div class="item_top">
                    <div class="item_t_l">
                      <i class="el-icon-caret-top"></i>
                      <span>NO.{{index + 1}}</span>
                      <p>{{item.name}}</p>
                    </div>
                    <div class="item_t_r">{{item.value}}%</div>
                  </div>
                  <div class="item_progress">
                      <el-progress
                        :percentage="item.value"
                        stroke-width="8"
                        define-back-color="rgba(71,179,255,0.20)"
                        text-color="#47B3FF"
                        :show-text="false"
                      ></el-progress>
                  </div>
                </div>
                </vue-seamless-scroll>
           </div>
        </div>
        <div class="card">
          <div class="card_title">近6个月合作门店增长曲线图</div>
          <div class="card_box">
            <div class="lineBox">
              <div class="lineChat db_chat">
                <chart-line :xAxisData="lineLabel" :seriesData="lineValue" />
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card_title">近6个月团购券出售数量</div>
          <div class="card_box">
           <div class="numBox">
            <div class="barChat db_chat">
              <chart-bar :xAxisData="sellBarLabel" :seriesData="sellBarValue" unit="张" />
            </div>
           </div>
          </div>
        </div>
      </div>

      <div class="screen_c">
        <div class="c_top">
          <div class="c_left">
            <div class="item">
              <p>{{baseInfo.sbpszl || '0'}}</p>
              <span>设备铺设总量</span>
            </div>
            <div class="item">
              <p>{{baseInfo.byxzhzmdsl || '0'}}</p>
              <span>本月新增合作门店数量</span>
            </div>
            <div class="item">
              <p>{{baseInfo.byxzsbsl || '0'}}</p>
              <span>本月新增设备数量</span>
            </div>
            <div class="item">
              <p>{{baseInfo.jrsbzxl || '0'}}</p>
              <span>今日设备在线量</span>
            </div>
          </div>
          <div class="c_cen">
            <div class="cen_num">
              <img src="@/assets/image/sjbBg.png" alt="" srcset="">
              <div class="cen_text">
                <p>{{baseInfo.hzmdzs || '0'}}</p>
                <span>合作门店</span>
                <span>总数</span>
              </div>
            </div>
            <div class="item">
              <p>{{baseInfo.hcsyzsl || '0'}}</p>
              <span>耗材使用总数量</span>
            </div>
          </div>
          <div class="c_left">
            <div class="item">
              <p>{{baseInfo.hhrzl || '0'}}</p>
              <span>合伙人总量</span>
            </div>
            <div class="item">
              <p>{{baseInfo.ljfwyhzl || '0'}}</p>
              <span>累计服务用户总量</span>
            </div>
            <div class="item">
              <p>{{baseInfo.tgqgmzl || '0'}}</p>
              <span>团购券购买总量</span>
            </div>
            <div class="item">
              <p>{{baseInfo.tgqhxzl || '0'}}</p>
              <span>团购券核销总量</span>
            </div>
          </div>
        </div>
        <div class="c_bom">
          <img src="@/assets/image/map.png" alt="" srcset="">
        </div>
      </div>

      <div class="screen_r">
        <div class="card">
          <div class="card_title">合伙人收益榜</div>
          <div class="card_box">
              <div class="getBox">
                <div class="table_head">
                  <p class="head1">排名</p>
                  <p class="head2">合伙人名称</p>
                  <p class="head2">入伙时间</p>
                  <p class="head2">收益金额</p>
                </div>
                <vue-seamless-scroll
                  :data="hhrsybData"
                  :class-option=" {
                        step: 0.5, // 滚动速度
                        limitMoveNum: 6, // 开始滚动的数据量
                        hoverStop: true, // 悬停停止
                        direction: 1, // 0向下 1向上 2向左 3向右
                        openWatch: true, // 开启数据实时监控
                      }"
                  class="table_body"
                >
                  <div class="item" v-for="(item,index) in hhrsybData" :key="index">
                    <p class="head3">No.{{index + 1}}</p>
                    <p class="head4">{{item.name}}</p>
                    <p class="head5">{{item.date}}</p>
                    <p class="head6">{{item.money}}</p>
                  </div>
                </vue-seamless-scroll>
              </div>
           </div>
        </div>
        <div class="card">
          <div class="card_title">近6个月新增合伙人对比</div>
          <div class="card_box">
            <div class="addBox">
              <div class="addChat db_chat">
              <chart-bar :xAxisData="addBarLabel" :seriesData="addBarValue" unit="个数"/>
            </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card_title">合伙人设备推广排行榜</div>
          <div class="card_box">
           <div class="rankBox">
            <div class="table_head">
                  <p class="head1">排名</p>
                  <p class="head2">合伙人名称</p>
                  <p class="head2">门店推广数量</p>
                  <p class="head2">设备推广数量</p>
                </div>
                <vue-seamless-scroll
                  :data="hhrsbtgphbData"
                  :class-option=" {
                        step: 0.5, // 滚动速度
                        limitMoveNum: 6, // 开始滚动的数据量
                        hoverStop: true, // 悬停停止
                        direction: 1, // 0向下 1向上 2向左 3向右
                        openWatch: true, // 开启数据实时监控
                      }"
                  class="table_body"
                >
                  <div class="item" v-for="(item,index) in hhrsbtgphbData" :key="index">
                    <p class="head3">No.{{index + 1}}</p>
                    <p class="head4">{{item.name}}</p>
                    <p class="head5">{{item.shopNum}}</p>
                    <p class="head6">{{item.equipNum}}</p>
                  </div>
                </vue-seamless-scroll>
           </div>
          </div>
        </div>
      </div>
    </div>
 </div>
</template>

<script>
import Head from "./components/head.vue";
import chartLine from "./components/chart-line.vue";
import chartBar from "./components/chart-bar.vue";
import vueSeamlessScroll from "vue-seamless-scroll";
import jsonData from "@/util/jsonData.json"
export default {
  name: "zwfw",
  components: {
    Head,
    chartLine,
    chartBar,
    vueSeamlessScroll
  },
  data() {
    return {
      // 大屏接口数据
      dataList: {},

      // 基本信息
      baseInfo: {},    

      // 覆盖门店类型占比
      fgmdlxzbData: [],    

       // 合伙人收益榜
      hhrsybData: [],   
      
      // 近6个月合作门店增长曲线图
      lineLabel: [],
      lineValue: [],

      // 近6个月团购券出售数量
      sellBarLabel: [],
      sellBarValue: [],

      // 近6个月新增合伙人对比
      addBarLabel: [],
      addBarValue: [],

      // 合伙人设备推广排行榜
      hhrsbtgphbData:[]
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      // 通过接口获取大屏数据
      this.dataList = jsonData
      this.baseInfo = this.dataList.baseInfo
      this.fgmdlxzbData = this.dataList.fgmdlxzbData
      this.hhrsybData = this.dataList.hhrsybData
      this.lineLabel =  this.dataList.mdzzqxData && this.dataList.mdzzqxData.map(item => item.label)
      this.lineValue =  this.dataList.mdzzqxData && this.dataList.mdzzqxData.map(item => item.value)
      this.sellBarLabel =  this.dataList.gmqcsslData && this.dataList.gmqcsslData.map(item => item.label)
      this.sellBarValue =  this.dataList.gmqcsslData && this.dataList.gmqcsslData.map(item => item.value)
      this.addBarLabel =  this.dataList.xzhhrdbData && this.dataList.xzhhrdbData.map(item => item.label)
      this.addBarValue =  this.dataList.xzhhrdbData && this.dataList.xzhhrdbData.map(item => item.value)
      this.hhrsbtgphbData = this.dataList.hhrsbtgphbData

      console.log(this.dataList)  
    },
  
  }
};
</script>

<style lang="scss"  scoped>
// $vw: 1080 / 100vh;
@import "styles/screen-jsf.scss";
</style>

